<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxKnob with radial gradient</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknob.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>

    <style type="text/css">
        #container {
            position: relative;
        }
        .inputField {
            left: 110px;
            top: 163px;
            position: absolute;
            background: transparent;
            border: none;
        }
        .inputField .jqx-input-content {
            background: transparent;
            font-size: 45px;

        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#container').jqxKnob({
                value: 10,
                min: 0,
                max: 100,
                startAngle: 90,
                endAngle: 450,
                snapToStep: true,
                pointerGrabAction: 'progressBar',
                rotation: 'clockwise',
                style: { fill: 'transparent'},
                progressBar: {
                    style: { fill: { color: '#00a4e1', gradientType: 'radial', gradientStops: [[0, 0.5], [100, 1]] } },
                    size: '50%',
                    offset: '50%',
                    background: { fill: { color: '#FFFFFF', gradientType: 'linear', gradientStops: [[0, 0.5], [100, 1]] } }
                },
                pointer: { type: 'line', style: { fill: '#00a4e1' }, size: '50%', offset: '50%', thickness: 0 }
            });
            var input = $('<div class="inputField">');
            $('#container').append(input);
            var inputOptions = {
                width: 180,
                height: '75px',
                decimal: 0, // starting value same as widget
                min: 0,  // same as widget
                max: 100, // same as widget
                textAlign: 'center',
                decimalDigits: 1,
                symbol: '%',
                symbolPosition: 'right',
                inputMode: 'simple'

            };
            $(input).jqxNumberInput(inputOptions);
            $(input).on('mousedown', function(event){
                event.stopPropagation();
            });
            $(input).on('keyup', function () {
                var val = $(this).val();
                $('#container').val(val);
            });
            $(input).on('change', function () {
                var val = $(this).val();
                $('#container').val(val);
            });

            $('#container').on('change', function (event) {
                if (event.args.changeSource == 'propertyChange' || event.args.changeSource == 'val') { return; }
                $(input).val(event.args.value);
            })
        });
    </script>
</head>
<body class='default'>
<div id='container' style="width: 400px; height: 400px;">
</div>
</body>
</html>
